<template>
  <div class="empty-container">
    <Icon type="empty" />
    <p>{{ text }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import Icon from '../Icon/index.vue'

export default defineComponent({
  components: {
    Icon
  },
  props: {
    text: {
      type: String,
      default: '无数据'
    }
  },
  setup() {
    return {}
  }
})
</script>

<style lang="less" scoped>
@import '@/styles/mixin.less';
@import '@/styles/var.less';
.empty-container {
  .self-center();
  color: @gray;
  text-align: center;

  .icon-container {
    font-size: 72px;
  }
}
</style>